<template>
  <div class="user_skills">
    <el-table
      :data="trackMacData"
      :show-header="false"
      height="300"
      style="width: 100%; height: 50%; padding: 0 10px"
      :fit="false"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        label="机车名称"
        min-width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="lineType"
        label="线别"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.row.lineType == '1' ? '左线' : '右线' }}
        </template>
      </el-table-column>
      <el-table-column
        label="位置"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          DK{{
            scope.row.positionKm < 10
              ? '0' + scope.row.positionKm
              : scope.row.positionKm
          }}+{{
            scope.row.positionM < 10
              ? '00' + scope.row.positionM
              : scope.row.positionM < 100
              ? '0' + scope.row.positionM
              : scope.row.positionM
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="topSpeed"
        label="速度"
        width="100"
        align="center"
      >
        <template slot-scope="scope"> {{ scope.row.topSpeed }}km/h </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['trackMacData'],
  mounted() {},

  methods: {},
}
</script>

<style lang="less" scoped>
.user_skills {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .el-table {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  :deep(th) {
    color: white !important;
    background-color: rgba(0, 0, 0, 0);
  }
}
:deep(.el-table tbody tr:hover > td) {
  color: white !important;
  background: #171f34 !important;
  border-bottom: 1px solid rgb(255, 255, 255);
}
.user_skills :deep(.el-table),
.user_skills :deep(.el-table tr) {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
</style>
